<template>
    <div class="deposit">
        <div class="head">
            <div class="he">
                <img class="he-img" src="../../assets/image/18.png" alt="">
            </div>
            <div class="xie">
                <p class="home">首页</p>>
                <p class="zhu">流程介绍</p>
            </div>
        </div>
        <div class="content">
            <div class="con-left">
                <div class="con">
                    <img class="con-img" src="../../assets/image/987.png" alt="">
                    <h4>数字资产存储流程</h4>
                </div>
                <div class="on-line">线上存储流程</div>
                <ul class="left-list">
                    <li @click="cur=0" :class="{active:cur==0}">存入流程</li>
                    <li @click="cur=1" :class="{active:cur==1}">转入流程</li>
                    <li @click="cur=2" :class="{active:cur==2}">提取流程</li>
                    <li @click="cur=3" :class="{active:cur==3}" class="offline">线下存储流程</li>
                </ul>
                <div class="kong"></div>
            </div>
            <div v-show="cur==0" class="con-right">
                <div class="ri-head">
                    <img class="ri-img" src="../../assets/image/1967.png" alt="">
                    存入流程
                </div>
                <div class="ri-con">
                    <img con-img src="../../assets/image/1255.png" alt="">
                </div>
            </div>
            <div v-show="cur==1" class="con-right">
                <div class="ri-head">
                    <img class="ri-img" src="../../assets/image/1967.png" alt="">
                    转入流程
                </div>
                <div class="ri-con">
                    <img con-img src="../../assets/image/1258.png" alt="">
                </div>
            </div>
            <div v-show="cur==2" class="con-right">
                <div class="ri-head">
                    <img class="ri-img" src="../../assets/image/1967.png" alt="">
                    提现流程
                </div>
                <div class="ri-con">
                    <img con-img src="../../assets/image/1256.png" alt="">
                </div>
            </div>
            <div v-show="cur==3" class="con-right">
                <div class="ri-head">
                    <img class="ri-img" src="../../assets/image/1967.png" alt="">
                    线下存储流程
                </div>
                <div class="ri-con">
                    <img con-img src="../../assets/image/1257.png" alt="">
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name:'deposit',
    data(){
        return{
            cur:0,
            tab:0,
        }
    },
    methods:{
        cons(index){
            this.con=index;
        },
        inxs(index){
            this.inx=index;
        }
    }
}
</script>

<style lang="scss" scoped>
.deposit{
    width: 100%;
    background: #f6f6f6;
    .head{
        width: 100%;
        background: #fff;
        .he{
            width: 100%;
            height: 100%;
            .he-img{
                width: 100%;
                height: 100%;
            }
        }
        .xie{
            width: 1200px;
            margin: 0 auto;
            height: 72px;
            border-bottom: 2px solid #ccc;
            display: flex;
            justify-content: flex-start;
            align-items: center;
            padding: 36px 0 20px 0;
            box-sizing: border-box;
            // background: #fff;
            .home{
                color: #ccc;
                font-size: 14px;
            }
            .zhu{
                color: #ff6600;
                font-size: 14px;
            }
        }
    }
    .content{
        width: 1200px;
        margin: 0 auto;
        display: flex;
        justify-content: center;
        align-content: center;
        // background: #fff;
        .con-left{
            width: 237px;
            height: 767px;
            margin-top: 15px;
            background: #fff;
            padding: 0 10px;
            box-sizing: border-box;
            margin-right: 10px;
            .con{
                width: 100%;
                padding: 51px 0 24px 0;
                display: flex;
                justify-content: center;
                align-items: center;
                border-bottom: 2px solid #ccc;
                font-size: 14px;
                box-sizing: border-box;
                .con-img{
                    width: 20px;
                    height: 20px;
                }
            }
            .on-line{
                width: 100%;
                padding: 35px 0 32px 0;
                font-size: 14px;
            }
            .left-list{
                width: 100%;
                li{
                    width: 100%;
                    height: 50px;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    padding: 0;
                }
                .active{
                    background: #ff6700;
                    color: #fff;
                }
            }
            .offline{
                width: 100%;
                padding: 26px 0 36px 0;
                font-size: 14px;
                border-top: 2px solid #ccc;
                border-bottom: 2px solid #ccc;
            }
            .kong{
                width: 100%;
                height: 385px;
            }
        }
        .con-right{
            width: 100%;
            .ri-head{
                width: 951px;
                height: 50px;
                padding: 0 30px;
                margin-top: 5px; 
                background: #ff7f00;
                display: flex;
                justify-content: flex-start;
                align-items: center;
                box-sizing: border-box;
                font-size: 16px;
                color: #fff;
                .ri-img{
                    width: 20px;
                    height: 20px;
                }
            }
            .con-img{
                width: 100%;
                height: 100%;
            }
        }
    }
}
</style>

